<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>地图找房</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="static/css/style.css">
  <style>#map{height:600px;margin:12px 0;}</style>
</head>
<body>
  <header>
    <h1>地图找房</h1>
    <nav><a href="index.html">返回列表</a></nav>
  </header>

  <main>
    <div id="map"></div>
  </main>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="static/js/data.js"></script>
  <script>
    const map = L.map('map').setView([39.9,116.4], 11);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19, attribution:'&copy; OSM'}).addTo(map);

    // HOUSES 数据里需包含 lat/lon
    (window.HOUSES||[]).forEach(h=>{
      if(h.lat && h.lon){
        const marker = L.marker([h.lat,h.lon]).addTo(map);
        marker.bindPopup(`<b>${h.title}</b><br>${h.price}<br><a href="detail.html?id=${h.id}">查看详情</a>`);
      }
    });
  </script>
</body>
</html>
